 <template>
  <div class="homeBanner-wrapper">
    <el-carousel height="3.14rem">
      <el-carousel-item v-for="item in banners" :key="item.id">
        <a :href="item.href">
          <img :src="item.src" :alt="item.title">
        </a>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
 
 <script type="text/ecmascript-6">

export default {
  name: "banner",
  data() {
    return {
      banners: [
        {
          id: 1,
          title: "1.png",
          href: "wwww.baidu.com",
          src: require("@/assets/images/banner_01.png")
        },
        {
          id: 2,
          title: "2.png",
          href: "wwww.baidu.com",
          src: require("@/assets/images/banner_01.png")
        },
        {
          id: 3,
          title: "3.png",
          href: "wwww.baidu.com",
          src: require("@/assets/images/banner_01.png")
        }
      ]
    };
  },
};
</script>
 
 <style lang="scss">
.homeBanner-wrapper {
  background-color: $c-white-light;
  padding: 0 0.2rem;
}

.el-carousel__container {
  .el-carousel__item {
    width: 100%;
    text-align: center;
    a {
      display: inline-block;
    }
    img {
      width: 100%;
    }
  }
}

.el-carousel__button {
  background-color: $c-themeBg;
}
</style>
 